<ng-container *ngIf="linked; else unlinked">
  <a [routerLink]="evidence.link">
    <ng-template [ngTemplateOutlet]="tag"></ng-template>
  </a>
</ng-container>

<ng-template #tag>
  <nz-tag
    [ngClass]="{
      rejected: evidence.status === 'REJECTED',
      submitted: evidence.status === 'SUBMITTED',
      accepted: evidence.status === 'ACCEPTED',
    }"
    nz-popover
    [nzPopoverPlacement]="popoverPlacement"
    [nzPopoverMouseEnterDelay]="0.5"
    [nzPopoverContent]="enablePopover ? popoverContent : undefined">
    <ng-template [ngTemplateOutlet]="tagContent"></ng-template>
  </nz-tag>
  <ng-template #popoverContent>
    <cvc-evidence-popover
      [evidenceId]="evidence.id"
      (contentRendered)="updatePopoverPosition()"></cvc-evidence-popover>
  </ng-template>
</ng-template>

<ng-template #unlinked>
  <ng-template [ngTemplateOutlet]="tag"></ng-template>
</ng-template>

<ng-template #tagContent>
  <cvc-icon-badges
    [flagged]="evidence.flagged"
    [entityColor]="iconColor">
    <i
      nz-icon
      nzType="civic-evidence"
      nzTheme="twotone"
      [nzTwotoneColor]="
        evidence.status === 'REJECTED'
          ? ('Rejected' | entityColor)
          : ('EvidenceItem' | entityColor)
      ">
    </i>
  </cvc-icon-badges>
  {{ evidence.name }}
</ng-template>
